<template>
  <div class="view">

    <div class="swiper">
      <swiper :imgs="imgs"></swiper>
    </div>

    <div class="right">
      <right-item></right-item>
    </div>

  </div>
</template>

<script>
  import Swiper from './swiper/Swiper.vue'
  import RightItem from './right/Right.vue'

  export default {
    name: "SpecialView",
    data(){
      return {
        imgs: [
          {url:  new URL("@/assets/img/swiper/swiper1.jpg", import.meta.url), content: "穿越异世界，领取专属兽娘"},
          {url:  new URL("@/assets/img/swiper/swiper2.jpg", import.meta.url), content: "火星撞地球！RNG对战FPX！"},
          {url:  new URL("@/assets/img/swiper/swiper3.jpg", import.meta.url), content: "每天亿遍，笑出人鱼线"}
        ]
      }
    },
    components: {
      Swiper,
      RightItem
    }
  }
</script>

<style scoped>

  .view {
    display: flex;
  }

  .swiper {
    /*display: block;*/
    flex: 1 1 40%;
    margin-right: 20px;
    width: 400px;
    height: 200px;
  }

  .right {
    /*display: block;*/
    flex: 1 1 60%;
    width: 400px;
    height: 200px;
  }
</style>